            @import"_reset.scss";
            .lovetask {
                width: 1000px;
                height: 550px;
                // background-color: skyblue;
                margin: 0 auto;
                background-color: skyblue;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
            }
            
            .love {
                width: 100px;
                height: 100px;
                background-color: red;
                position: relative;
                // margin: 0 auto;
                margin-top: 50px;
                transform: rotate(-45deg);
                animation-name: run;
                /* 设置动画的持续时间 */
                animation-duration: 1.5s;
                /* 设置动画的平滑速度 */
                animation-timing-function: ease-in-out;
                /* 设置动画结束后的元素位置  （backwards 默认值）*/
                animation-fill-mode: forwards;
                /* 设置动画执行次数 */
                animation-iteration-count: infinite;
                /* 设置动画的返回 */
                animation-direction: alternate;
            }
            
            @keyframes run {
                /* from {
        transform: translate(0);
    } */
                from {
                    transform: translateY(-30px) scale(1.3)rotate(-45deg);
                    opacity: 1;
                }
                to {
                    transform: translateY(200px)scale(0.5)rotate(-45deg);
                    opacity: 0.1;
                }
            }
            
            .love::before {
                content: '';
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                top: 0px;
                left: 50px;
                border-radius: 50%;
            }
            
            .love::after {
                content: '';
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                top: -50px;
                left: 0;
                border-radius: 50%;
            }
            
            .shadow {
                width: 100px;
                height: 10px;
                background-color: rgba(0, 0, 0, .5);
                box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, .5);
                border-radius: 70%;
                animation-name: shadow;
                /* 设置动画的持续时间 */
                animation-duration: 1.5s;
                /* 设置动画的平滑速度 */
                animation-timing-function: ease-in-out;
                /* 设置动画结束后的元素位置  （backwards 默认值）*/
                animation-fill-mode: forwards;
                /* 设置动画执行次数 */
                animation-iteration-count: infinite;
                /* 设置动画的返回 */
                animation-direction: alternate;
            }
            
            @keyframes shadow {
                0% {
                    transform: translateY(80px) scale(0.8);
                    opacity: 0;
                }
                50% {
                    transform: translateY(80px) scale(1.6);
                    opacity: 0;
                }
                100% {
                    transform: translateY(80px)scale(0.8);
                    opacity: 1;
                }
            }
            
            .carousel {
                width: 200px;
                height: 50px;
                overflow: hidden;
                // background-color: blue;
            }
            
            .carousel ul {
                width: 200px;
                height: 50px;
                position: relative;
                animation-name: li;
                animation-duration: 5s;
                // animation-delay: 3s;
                animation-timing-function: ease-in-out;
                animation-iteration-count: infinite;
            }
            
            ul:hover {
                animation-play-state: paused
            }
            
            .carousel ul .sllide {
                width: 100%;
                height: 100%;
                position: absolute;
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 20px;
            }
            
            .sllide:nth-of-type(1) {
                left: 0px;
                background-color: red;
            }
            
            .sllide:nth-of-type(2) {
                left: 200px;
                background-color: yellow;
            }
            
            .sllide:nth-of-type(3) {
                left: 400px;
                background-color: blue;
            }
            
            @keyframes li {
                0% {
                    left: 0px;
                }
                16% {
                    left: 0px;
                }
                32% {
                    left: -200px;
                }
                48% {
                    left: -200px;
                }
                64% {
                    left: -400px;
                }
                80% {
                    left: -400px;
                }
                96% {
                    left: 0px;
                }
                100% {
                    left: 0px;
                }
            }
            
            // 图片水平居中
            @mixin juzhong() {
                width: 300px;
                height: 300px;
            }
            
            .content {
                @include juzhong();
                margin: 0 auto;
                margin-top: 50px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            
            .background {
                @include juzhong();
                margin-top: 50px;
                background-image: url(../qb.jpg);
                background-size: 100% 100%;
                position: relative;
                left: 50%;
                transform: translate(-50%, 0px);
            }